import axios from "axios";
import React, { useEffect, useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { DataState } from "../home";
import { Notify } from "react-vant";
const Index: React.FC = () => {
  // 1. 路由隐式传参

  // const location = useLocation();
  // const v = location.state as DataState;
  // return (
  // <div>
  //   <img src={v.image} width="100%" alt="" />
  //   <h3>{v.title}</h3>
  //   <p>{v.word}</p>
  //   <p>￥：{v.price}</p>
  // </div>
  // );

  // 2. 通过获取动态路由参数 id 发送请求  获取详情数据
  const { id } = useParams();
  const [v, setItem] = useState({} as DataState);
  const navigate = useNavigate();
  const fetchDetailData = async () => {
    // 请求
    try {
      const resp = await axios.post("/api/list/" + id);
      const { code, message, data } = resp.data;
      if (code === 200) {
        setItem(data);
        Notify.show({ type: "primary", message });
      } else {
        Notify.show({
          type: "danger",
          message,
          onClose() {
            navigate("/");
          },
        });
      }

      // const resp = await axios.get('/api/list', { params: { id } });
      // const resp = await axios.post('/api/list', {  id  });

      console.log(resp.data);
    } catch {
      console.log("获取详情数据错误！！！");
    }
  };

  useEffect(() => {
    fetchDetailData();
  }, []);

  return (
    <div>
      <div>
        <img src={v.image} width="100%" alt="" />
        <h3>{v.title}</h3>
        <p>{v.word}</p>
        <p>￥：{v.price}</p>
      </div>
    </div>
  );
};

export default Index;
